<template>
    <div class="selectStore">
        <el-dialog title="选择门店" :visible.sync="showSelectStoreCon" :before-close="handelClose" @open="handelOpen">
            <el-tabs v-model="activeName">
                <!-- 多门店 -->
                <el-tab-pane label="多门店" name="first">
                    <div class="dialog-search-con">
                        <div class="dialog-search-item">
                            <div class="dialog-search-item-title">门店编号</div>
                            <div class="dialog-search-item-input">
                                <el-input size="mini" v-model="storeFormData.storeNo" placeholder="请输入门店编号"></el-input>
                            </div>
                        </div>
                        <div class="dialog-search-item">
                            <div class="dialog-search-item-title">门店名称</div>
                            <div class="dialog-search-item-input">
                                <el-input size="mini" v-model="storeFormData.storeName" placeholder="请输入门店名称"></el-input>
                            </div>
                        </div>
                        <div class="dialog-search-item">
                            <div class="dialog-search-item-title">门店分组</div>
                            <div class="dialog-search-item-input">
                                <el-select size="mini" v-model="storeFormData.groupId" placeholder="请选择门店分组">
                                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="dialog-search-item">
                            <el-button size="mini" type="primary" @click="storeHandleSearch">查询</el-button>
                            <el-button size="mini" type="primary" @click="storeHandleClear">清空</el-button>
                        </div>
                    </div>
                    <div>
                        <el-table :data="storeData" border size="mini" @selection-change="handleSelectionChange"
                            :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
                            <el-table-column type="selection" width="50" align="center"></el-table-column>
                            <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column property="storeNo" label="门店编号" width="" align="center"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column property="storeName" label="门店名称" width="" align="center"
                                :show-overflow-tooltip="true"></el-table-column>
                        </el-table>
                    </div>
                    <div class="pagination">
                        <el-pagination @current-change="storeHandleCurrentChange" :current-page.sync="storeFormData.pageNum"
                            :page-size="storeFormData.pageSize" layout="total, prev, pager, next" :total="storeTotal"></el-pagination>
                    </div>
                    <div class="dialog-btn-con">
                        <el-button size="small" type="primary" @click="handelSure">确定</el-button>
                        <el-button size="small" @click="handelClose">取消</el-button>
                    </div>
                </el-tab-pane>
                <!-- 门店分组 -->
                <el-tab-pane label="门店分组" name="second">
                    <div class="dialog-search-con">
                        <div class="dialog-search-item">
                            <div class="dialog-search-item-title">分组名称</div>
                            <div class="dialog-search-item-input">
                                <el-input size="mini" v-model="groupFormData.name" placeholder="请输入分组名称"></el-input>
                            </div>
                        </div>
                        <div class="dialog-search-item">
                            <el-button size="mini" type="primary" @click="groupHandleSearch">查询</el-button>
                            <el-button size="mini" type="primary" @click="groupHandleClear">清空</el-button>
                        </div>
                    </div>
                    <div>
                        <el-table :data="groupData" border size="mini" :header-cell-style="{background:'#f8f8f8'}"
                            style="width: 100%" @row-click="handleRow">
                            <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column property="name" label="分组名称" width="" align="center"
                                :show-overflow-tooltip="true"></el-table-column>
                        </el-table>
                    </div>
                    <div class="pagination">
                        <el-pagination @current-change="groupHandleCurrentChange" :current-page.sync="groupFormData.pageNum"
                            :page-size="groupFormData.pageSize" layout="total, prev, pager, next" :total="groupTotal"></el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
import { queryStoreInfo } from "@/common/service/storeManagement/storeInfo.js";
import { queryStoreGrouping } from "@/common/service/storeManagement/storeGrouping.js";
import {
    checkWareHouse,
    checkGroup
} from "@/common/service/productManagement/warehouseInfo.js";
export default {
    name: "selectStore",
    data() {
        return {
            activeName: "first", //控制顶部tab切换
            /*多门店*/
            storeFormData: {
                storeNo: "", //门店编号
                storeName: "", //门店名称
                groupId: "", //门店分组
                pageNum: 1,
                pageSize: 10
            },
            options: [], //门店分组下拉框数据
            selectionData: [], //勾选框勾选的数据
            storeData: [], //多门店表格数据
            storeTotal: null, //多门店表格数据总条数
            /*门店分组*/
            groupFormData: {
                name: "",
                pageNum: 1,
                pageSize: 10
            },
            groupData: [], //门店分组表格数据
            groupTotal: null, //门店分组表格数据总条数
            selectId: "" //当前选择行的id
        };
    },
    created() {},
    methods: {
        /*-----------------------------多门店查询操作-----------------------------*/
        //查询多门店表格数据
        _queryStoreInfo() {
            queryStoreInfo(this.storeFormData)
                .then(res => {
                    this.storeData = res.list;
                    this.storeTotal = res.totalCount;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },
        //页码切换
        storeHandleCurrentChange(val) {
            this.storeFormData.pageNum = val;
            this._queryStoreInfo();
        },
        //点击查询
        storeHandleSearch() {
            this.storeFormData.pageNum = 1;
            this.storeFormData.pageSize = 10;
            this._queryStoreInfo();
        },
        //点击清空
        storeHandleClear() {
            this.storeFormData = {
                storeNo: "",
                storeName: "",
                groupId: "",
                pageNum: 1,
                pageSize: 10
            };
            this.$message({
                type: "success",
                message: "清空成功!"
            });
            this._queryStoreInfo();
        },

        /*-----------------------------多门店保存选择门店操作-----------------------------*/
        handelSure() {
            if (this.selectionData.length) {
                if (this.warehouseType == "1") {
                    var storeArrs = [];
                    this.selectionData.forEach((item, index) => {
                        storeArrs.push(item.storeNo);
                    });
                    var storeNos = storeArrs.join(",");
                    var data = {
                        storeNos: storeNos
                    };
                    checkWareHouse(data)
                        .then(res => {
                            this.$emit(
                                "sure",
                                JSON.stringify(this.selectionData)
                            );
                        })
                        .catch(err => {
                            this.$message.error(err.message);
                        });
                } else {
                    this.$emit("sure", JSON.stringify(this.selectionData));
                }
            } else {
                this.$message.error("门店不能为空，请选择门店");
            }
        },

        /*-----------------------------门店分组查询操作-----------------------------*/
        //查询门店分组表格数据
        _queryStoreGrouping() {
            queryStoreGrouping(this.groupFormData)
                .then(res => {
                    this.groupData = res.content;
                    this.groupTotal = res.totalElements;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },
        //页码切换
        groupHandleCurrentChange(val) {
            this.groupFormData.pageNum = val;
            this._queryStoreGrouping();
        },
        //点击查询
        groupHandleSearch() {
            this.groupFormData.pageNum = 1;
            this.groupFormData.pageSize = 10;
            this._queryStoreGrouping();
        },
        //点击清空
        groupHandleClear() {
            this.groupFormData = {
                name: "",
                pageNum: 1,
                pageSize: 10
            };
            this.$message({
                type: "success",
                message: "清空成功!"
            });
            this._queryStoreGrouping();
        },

        /*-----------------------------门店分组保存选择门店操作-----------------------------*/
        //点击某一行
        handleRow(val) {
            this.selectId = val.id;
            if (this.warehouseType == "1") {
                this._checkGroup();
            } else {
                this._queryStoreById();
            }
        },
        //判断门店分组是否已选
        _checkGroup() {
            var data = {
                groupId: this.selectId
            };
            checkGroup(data)
                .then(res => {
                    this._queryStoreById();
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },
        //通过门店id查询对应的门店
        _queryStoreById() {
            var data = {
                groupId: this.selectId,
                pageNum: 1,
                pageSize: 10000
            };
            queryStoreInfo(data)
                .then(res => {
                    this.selectionData = res.list;
                    this.$emit("sure", JSON.stringify(this.selectionData));
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*-----------------------------查询门店分组下拉框数据-----------------------------*/
        //查询门店分组下拉框数据
        _queryStoreGroupingSelect() {
            var data = {
                pageSize: 100
            };
            queryStoreGrouping(data)
                .then(res => {
                    this.options = res.content;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*-----------------------------监测勾选框操作-----------------------------*/
        handleSelectionChange(val) {
            this.selectionData = val;
        },

        /*-----------------------------关闭弹窗-----------------------------*/
        handelClose() {
            this.$emit("close", false);
        },

        /*-----------------------------打开弹窗-----------------------------*/
        handelOpen() {
            this.activeName = "first";
            this.storeFormData = {
                storeNo: "",
                storeName: "",
                groupId: "",
                pageNum: 1,
                pageSize: 10
            };
            // 初始化多门店列表数据
            this._queryStoreInfo();
            // 初始化门店分组列表数据
            this._queryStoreGrouping();
            // 初始化门店分组下拉框数据
            this._queryStoreGroupingSelect();
        }
    },
    props: {
        showSelectStoreCon: {
            type: Boolean,
            default: false
        },
        warehouseType: {
            type: Number,
            default: false
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>